<template>
 <div>
  <el-form :inline="true" style="margin-bottom: -15px" label-width="130px">
     <el-form-item style="margin-bottom: 5px">
        <el-input placeholder="人员姓名..." v-model="form.userName" size="mini" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" style="margin-bottom: 5px" @click="handleClick">查询</el-button>
      </el-form-item>
  <div style="float:right;">
    <userPop ref="pop"></userPop>
  </div>
  </el-form>
  <el-table
    size="mini"
    :data="tableData"
    :height="tableHeight"
    style="width: 100%">
    <el-table-column
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      prop="userName"
      label="用户名"
      width="200px"
      >
    </el-table-column>
    <el-table-column
      prop="role"
      width="200px"
      label="权限">
    </el-table-column>
    <el-table-column
      width="150px"
      label="状态">
      <template slot-scope="scope">
        <el-tag type="success" v-if="scope.row.remove==0">
          正常
        </el-tag>
        <el-tag type="danger" v-else>
          禁用
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="150">
      <template slot-scope="scope">        
        <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
        <el-button @click="handleChangeStatus(scope.row)" type="text" size="small">禁用/启动</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      style="margin-top: 10px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next"
      background
      :total="page.total">
    </el-pagination>
  </div>
 </div>
</template>

<script>
import { findByPage, active, remove } from '@/api/user'
import userPop from './userPop'
  export default {
    data() {
      return {
        height: `${document.documentElement.clientHeight}`,
        tableHeight: 440,
        form: {
          userName: ''
        },
        page: {
          currentPage: 1,
          total: 0,
          pageSize: 10
        },
        tableData: [],
        row: {}
      }
    },
    methods: {
      handleClick() {
        findByPage(this.form.userName, this.page.currentPage, this.page.pageSize).then(response => {
          this.tableData = response.content
          this.page.total = response.totalNum
        })
      },
      handleSizeChange(value) {
        this.page.pageSize = value
        this.handleClick()
      },
      handleCurrentChange(value) {
        this.page.currentPage = value
        this.handleClick()
      },
      handleEdit(row) {
        this.$refs.pop.clickNew(row)
      },
      handleChangeStatus(row) {
        const message = row.remove===0?'此操作将禁用账号 ' + row.userName + '，是否继续?':'此操作将启用账号 ' + row.userName + '，是否继续?'
        this.$confirm(message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          row.remove===0
            ?remove(row.userId).then(this.showMessage).catch(this.showCancelMessage)
            :active(row.userId).then(this.showMessage).catch(this.showCancelMessage)
        })
      },
      showMessage() {
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
        this.handleClick()
      },
      showCancelMessage() {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      },
    },
    components: {
      userPop,
    },
    created() {
      this.height>900?this.tableHeight=750:440
    },
    mounted() {
      this.handleClick()
    },
  }
</script>